<template>
  <div style="width:100%">
    <div ref="cxcq" style="width:100%; height:20vh;" />
  </div>
</template>

<script>
import { bnrQuery } from '../../api/dataApi'
export default {
  data() {
    return {
      xData: [],
      data1: [],
      data2: [],
      data: [],
    }
  },

  watch: {
    data: {
      handler() {
        this.initChart()
      },
      deep: true,
    },
    // psname(val) {
    //   this.getData(val)
    // },
  },
  mounted() {
    this.getData()

    //需要执行的代码
  },

  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@prod_cxcqrs'
      header['cj'] = this.$route.query.cj
      const params = {
        '@params': JSON.stringify(header),
        pageSize: 99999,
        pageIndex: 0,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data.length > 0) {
            this.data = res.data
            this.xData = res.data.map((item) => {
              return item.cpx
            })
            console.log('this.xData', this.xData)
            this.data1 = res.data.map((item) => {
              return item.cqrs
            })
            this.data2 = res.data.map((item) => {
              return item.qqrs
            })
            this.initChart()
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },

    initChart() {
      const myChart = this.$echarts.init(this.$refs.cxcq)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        color: ['#0393f3', '#eee15f'],
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '17%',
        },
        legend: {
          data: ['出勤人数', '缺勤人数'],
          itemWidth: 10,
          itemHeight: 8,
          textStyle: {
            color: '#fff',
            fontSize: this.fitChartSize(12),
          },
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisPointer: {
              type: 'shadow',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#05358b',
              },
            },
            axisLabel: {
              formatter: '{value}',
              color: '#eee',
              fontSize: this.fitChartSize(9),
              interval: 0,
              rotate: 25,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            min: 0,
            axisLine: {
              show: false,
            },

            // max: 100,
            // interval: 50,
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: '{value}',
              color: '#ccc',
              fontSize: this.fitChartSize(10),
            },
          },
        ],
        series: [
          {
            name: '出勤人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value
              },
            },

            data: this.data1,
          },
          {
            name: '缺勤人数',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value
              },
            },
            data: this.data2,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
